<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
	.top{
		min-height: 140px;
		border: 0px #000 solid;
	}
	
	
	.t1{background-size: auto 100%;}
	
	/* 上部分 */
	.logo-fox{width: 15%;min-width: 12rem; height: 8rem;display: inline-block ;border: 0px #000 solid;}
	.logo-fox img{height: 85%;margin-top: 7%;}
	
	.sousuo-fox{width: 20%; min-width: 20rem; display: inline-block;}
	.sou{width: 80%;height: 3rem;display: inline-block;background-color: rgba(0,0,0,0);}
	.enter{cursor: pointer;position: relative;left: -3rem;}
	
	
	/* 导航栏部分 */
	.dao{
		font-size:0;
		border: 0px blue solid;
	}
	.dao a{
		color: white;
		font-size: 1.7rem;
		display: inline-block;
		line-height: 4.5rem;
		padding: 0em 1.5em;
	}
	.dao2 a{font-size: 1.45rem;line-height: 4rem;color: #555;}

	
	
</style>
<script type="text/javascript">
	
	$(function(){
		
		//本页数据
		var did="${did}";
		var xid="${xid}";
		
		$(".t2 .dao a").each(function(i){
			if(i+1==did){
				$(this).addClass('yx-bg-shen');
			}
		})
		
		$(".dao2 a").each(function(i){
			if(i+1==xid){
				$(this).addClass('yx-color-three');
			}
		})
		
		//点击搜索
		$(".enter").click(function(){
			var sou=$(".sou").val();
			if(sou==""){
				return layer.msg("你要输入点啥呀");
			}
			location.href="../home/index.html?did=6&sou="+encodeURI(sou);
		})
		
		//监听回车
		$(".sou").bind("keypress",function(e){  
		  	// 兼容FF和IE和Opera      
		    var theEvent = e || window.event;      
		    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
		    if (code == 13) {
				$(".enter").click();  
		    }   
		});  

	});

</script>
<div class="top">
	
	<!-- 上部分 -->
	<div class="t1">
		<div class="tt1 yx-max-width">
			<div class="logo-fox">
				<img src="../../static/img/logo.png"/>
			</div>
			<div class="sousuo-fox">
				<input class="sou layui-input yx-input" placeholder="搜索内容" value="${sou}" />
				<i class="enter layui-icon">&#xe615;</i>
			</div>
		</div>
	</div>
	
	<!-- 导航栏 -->
	<div class="t2 yx-bg-one">
		
		<div class="dao yx-max-width">
			<a class="yx-hover-shen" href="../home/index.html?did=1">首页</a>
			<a class="yx-hover-shen" href="../home/index.html?did=2">热点</a>
			<a class="yx-hover-shen" href="../home/index.html?did=3">分类</a>
			<a class="yx-hover-shen" href="../home/index.html?did=4">Top榜</a>
			<a class="yx-hover-shen" href="../home/index.html?did=5">关于</a>
		</div>
		
	</div>
	
	<!-- 小导航栏 -->
	<div class="t3">
		
		<div class="dao dao2 yx-bg-min-shen yx-max-width">
			<c:forEach items="${xids}" var="x" varStatus="s">
				<a href="../home/index.html?did=${did}&xid=${s.index+1}" class="yx-hover-color-three">${x}</a>
			</c:forEach>
		</div>
		
	</div>
	
</div>